<template>
  <div ref="contain" class="data_card flex_item align_item_center justify_content_center">
    <div class="flex_y align_item_center">
      <span class="data_card_font1 ma_1">{{label}}</span>
      <span class="data_card_font2 ma_2">{{count}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    color: String,
    label: String,
    count: Number
  },
  mounted() {
    let e = this.$refs.contain;
    e.style.backgroundColor = this.color;
  }
};
</script>

<style>
.data_card {
  width: 250px;
  height: 100px;
}
.data_card_font1 {
  color: aliceblue;
  font-size: 18px;
  font-weight: 600;
}
.data_card_font2 {
  color: aliceblue;
  font-size: 20px;
}
</style>
